import React, { Component } from 'react';
import { LoginFrom } from '../login/LoginStyle'
import { Button } from 'antd-mobile'
import { RegisterContair, MaskBox, Dialog } from './RegisterStyle'
import http from '../../../utils/http'

class Register extends Component {
    constructor() {
        super()
        this.state = {
            input1Value: '',
            input1ValueFlag: false,
            input2Value: '',
            input2ValueFlag: false,
            MaskBoxFlag: false,
            MaskText: '',
            existFlag: false
        }
    }

    goLogin = () => {
        const { push } = this.props.history
        push('/mine/login')
    }

    changeInput1 = (e) => {
        this.setState({
            input1Value: e.target.value
        })
        if (e.target.value !== '') {
            this.setState({
                input1ValueFlag: true
            })
        } else {
            this.setState({
                input1ValueFlag: false
            })
        }
    }
    changeInput2 = (e) => {
        this.setState({
            input2Value: e.target.value
        })
        if (e.target.value !== '') {
            this.setState({
                input2ValueFlag: true
            })
        } else {
            this.setState({
                input2ValueFlag: false
            })
        }
    }

    // 验证手机号和密码是否正确
    registerSubmit = async () => {
        if (this.state.input1Value.length < 3) {
            this.setState({
                MaskBoxFlag: true,
                MaskText: '请输入正确的用户名',
            })
        } else if (this.state.input2Value.length < 6 || this.state.input2Value.length > 16) {
            this.setState({
                MaskBoxFlag: true,
                MaskText: '请输入正确的密码',
            })
        } else {
            // 判断用户名是否存在，不存在才让提交
            if (!this.state.existFlag) {
                const result = await http({
                    url: 'http://localhost:9000/register',
                    data: {
                        username: this.state.input1Value,
                        password: this.state.input2Value
                    },
                    method: 'POST',
                })

                if (result.data.status === 2) {
                    this.goLogin()
                }
            }
        }
    }
    // 去掉遮罩
    knowMask = () => {
        this.setState({
            MaskBoxFlag: false
        })
    }
    // 当用户名的input框失去焦点的时候判断注册的用户名是否存在
    confirmUsername = async () => {
        if (this.state.input1Value.length < 3) {
            this.setState({
                MaskBoxFlag: true,
                MaskText: '请输入正确的用户名'
            })
        } else {
            const result = await http({
                url: 'http://localhost:9000/register',
                params: {
                    username: this.state.input1Value
                },
                method: 'GET'
            })
            if (result.data.status == 1) {
                this.setState({
                    existFlag: true
                })
            } else {
                this.setState({
                    existFlag: false
                })
            }
        }
    }


    render() {
        return (
            <RegisterContair>
                {
                    this.state.MaskBoxFlag &&
                    <MaskBox>
                        <Dialog>
                            <span>{this.state.MaskText}</span>
                            <Button type="warning" onClick={this.knowMask}>我知道了</Button>
                        </Dialog>
                    </MaskBox>
                }
                <LoginFrom>
                    <div className="login_outer">
                        <span> 使用手机注册</span>
                    </div>
                    <div className="login_content">
                        <div className="tel_login">
                            {
                                this.state.existFlag &&
                                <span className="exist_username">您输入的用户名已存在</span>
                            }
                            <input
                                type="text"
                                placeholder="请输入至少三个字符的用户名"
                                ref={el => this.input1 = el}
                                onChange={this.changeInput1}
                                onBlur={this.confirmUsername}
                            />
                            <input
                                type="text"
                                placeholder="请输入6-16位登录密码"
                                ref={el => this.input2 = el}
                                onChange={this.changeInput2}
                            />
                        </div>
                        {this.state.input1ValueFlag && this.state.input2ValueFlag
                            && <Button type="warning" onClick={this.registerSubmit}>注册</Button>
                            || <Button type="warning" disabled> 注册</Button>
                        }
                        <div className="register_info">
                            <span>点击注册，表示同意《聚美优品用户协议》</span>
                        </div>
                    </div>
                </LoginFrom>
            </RegisterContair>
        )
    }

}

export default Register